<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 图标组件库 -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
    <title>主页面</title>
</head>
<body>

<!-- Flash 消息显示部分 -->
<section class="flash-message">
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <ul class="flashes">
                {% for category, message in messages %}
                    <li class="flash {{ category }}">{{ message }}</li>
                {% endfor %}
            </ul>
        {% endif %}
    {% endwith %}
</section>

<!-- 侧边导航栏部分 -->
<nav class="sidebar">
    <header>
        <!--头像及用户名-->
        <div class="image-text">
        <span class="image">
          <img id="sidebar-avatar" src="{{ url_for('static', filename='image/avatar.jpg') }}" alt="Avatar">
        </span>
            <div class="text logo-text">
                <span id="sidebar-username"> {{ user.username }}</span>
            </div>
        </div>

        <i class="bx bx-chevron-right toggle"></i>
    </header>

    <div class="menu-bar">
        <div class="menu">
            <ul class="menu-links">
                <li class="nav-link">
                    <a href="{{ url_for('center') }}">
                        <i class="bx bx-home-alt icon"></i>
                        <span class="text nav-text">个人中心</span>
                    </a>
                </li>

                <li class="nav-link" id="mooc-btn">
                    <a href="javascript:void(0);">
                        <i class='bx bx-book icon'></i>
                        <span class="text nav-text">评论查看/获取</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a href="{{ url_for('choose') }}">
                        <i class='bx bx-bell icon'></i>
                        <span class="text nav-text">课程评价智能体选择</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a href="{{ url_for('dashboard') }}">
                        <i class='bx bx-bar-chart-alt-2 icon'></i>
                        <span class="text nav-text">新对话创建</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a href="{{ url_for('history') }}">
                        <i class='bx bx-pie-chart-alt icon'></i>
                        <span class="text nav-text">历史记录</span>
                    </a>
                </li>

                <li class="nav-link">
                    <a href="{{ url_for('guide') }}">
                        <i class='bx bx-wallet icon'></i>
                        <span class="text nav-text">系统简介</span>
                    </a>
                </li>
                 <li class="search-box"></li>

            </ul>
        </div>

        <div class="bottom-content">
            <li>
                <a href="{{ url_for('logout') }}">
                    <i class="bx bx-log-out icon"></i>
                    <span class="text nav-text">退出登录</span>
                </a>
            </li>

            <!-- 白天夜间切换 -->
            <li class="mode">
                <div class="sun-moon">
                    <i class="bx bx-moon icon moon"></i>
                    <i class="bx bx-sun icon sun"></i>
                </div>
                <span class="mode-text text"></span>
                <div class="toggle-switch">
                    <span class="switch"></span>
                </div>
            </li>
        </div>
    </div>
</nav>
<!-- 主体部分 -->
<section class="container">
    <div class="text">EduMAS——情感分析视角下的多智能体教育平台评价系统</div>
    <!-- 聊天对话框 -->
    <div id="chatbox" class="chatbox" style="display: none;">
        <div class="chat-content" id="chatContent"></div>
    </div>
    <!--提示框 -->
    <div id="tipbox" class="tipbox" >
        <div class="tip-content" id="tipContent">
            <img id="tip" src="../static/image/tip.png">
        </div>
    </div>


        <!-- 底部输入框部分 -->
        <div class="input" id="inputDiv">
            <div class="text-container">
                <label for="textInput"></label>
                <textarea id="textInput" placeholder="点击左下角按钮上传csv文件(必须包含comment列数据）..."  ></textarea>
            </div>
            <div class="buttons-container">
                <label for="fileInput" class="label-icon"></label>
                <input type="file" id="fileInput" accept=".csv">
                <button id="submitButton" disabled><i class="bx bx-chevrons-up icon"></i></button>
            </div>
        </div>


    <div id="newContent" style="display: none;">
        <div id="urlInputContainer" style="display: none;">
            <input type="text" id="CourseNameInput" placeholder="请输入课程名称">
            <button  id="submitUrl" onclick="fetchPage(1)">提交</button>
            <button id="downloadResults" onclick="downloadResults()">下载结果</button>
        </div>

        <div id="result" class="table-container">
            <table id="courseData">
                <thead>
                <tr>
                    <th>昵称</th>
                    <th>评论内容</th>
                    <th>评分</th>
                </tr>
                </thead>
                <tbody>
                <!-- 这里会通过 JavaScript 动态填充数据 -->
                </tbody>
            </table>
        </div>

        <div id="paginationControls" class="pagination-controls">
            <button id="prevPage" style="display: none;" onclick="changePage('prev')">上一页</button>
            <select id="itemsPerPage" onchange="fetchPage(1)">
                <option value="5">5条/页</option>
                <option value="10">10条/页</option>
                <option value="20">20条/页</option>
            </select>
            <button id="nextPage" style="display: none;" onclick="changePage('next')">下一页</button>
            <span id="currentPage" style="display: none;">1</span> <!-- 用于显示当前页码 -->
        </div>
    </div>

</section>


<script src="{{ url_for('static', filename='js/dashboard.js') }}"></script>
<!-- JavaScript 定时隐藏 Flash 消息 -->
<script>
    // 等待页面加载完成后执行
    window.onload = function() {
        // 获取 flash 消息的元素
        const flashMessages = document.querySelector('.flash-message');
        // 如果存在 flash 消息，设置 1 秒后隐藏
        if (flashMessages) {
            setTimeout(() => {
                flashMessages.style.display = 'none';
            }, 1000); // 1秒后隐藏
        }
    }
</script>
</body>
loading
</html>
